<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #root {
            width: 60%;
            margin: 0 auto;
        }

        li {
            width: 32%;
            list-style: none;
            padding: 6px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        p {
            text-align: left;
            background: #efefef;
            color: #908e8f;
            line-height: 38px;
            font-size: 14px;
            padding-left: 6px;
        }

        img {
            width: 100%;
        }
    </style>

</head>
<body>
<div id="root">
    <ul>
        <li v-for="items in item" :key="items.id">
            <img :src="items.image" alt="">
            <p>{{items.text}}</p>
        </li>
    </ul>

</div>

<script>
    new Vue({
        el: "#root",
        data: {
            item: [
                {id: 1, image: "./images/flowserve.png", text: "Flowserve 福斯"},
                {id: 2, image: "./images/flowserve.png", text: "微伯科技"},
                {id: 3, image: "./images/flowserve.png", text: "龙行天下"},
                {id: 4, image: "./images/flowserve.png", text: "OSSINE 欧西斯"},
                {id: 5, image: "./images/flowserve.png", text: "深圳市安琪食品有限公司"},
                {id: 6, image: "./images/flowserve.png", text: "Flowserve 福斯"},
                {id: 7, image: "./images/flowserve.png", text: "Flowserve 福斯"},
                {id: 8, image: "./images/flowserve.png", text: "Flowserve 福斯"},
                {id: 9, image: "./images/flowserve.png", text: "Flowserve 福斯"}
            ]
        }
    })
</script>
</body>
</html>

